package myJs.user

import myJs.App
import myJs.cps.Style
import myJs.tool.Pojo.LeftItem
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.web.html._
import typings.csstype.csstypeStrings

/**
 * Created by yz on 22/4/2022
 */
@react object LeftCp {

  type Props = Unit

  val component = FunctionalComponent[Props] { props =>

    val items=User.pages.filterNot{ x=>
      List().contains(x)
    }.map{x=>
      LeftItem(id = x.path, path = s"#/${User.prefix}/${x.path}", title = x.titleStr, faClass = x.faClass)
    }

    div(className:="page-sidebar-wrapper",
      div(style:=Style(display = csstypeStrings.block),className:="page-sidebar navbar-collapse collapse",

        ul(className := "page-sidebar-menu", data - "auto-scroll" := "true", data - "slide-speed" := "200",
          li(className := "sidebar-toggler-wrapper",
            div(className := "sidebar-toggler",
            )
          ),
          li(style := Style(height = "10px")),

          items.map { item =>
            li(key := s"${item.path}", id := s"${item.id}",
              a(href := s"${item.path}", className := "myLeftA", title := s"${item.title}",
                i(className := s"fa ${item.faClass}")," ",
                span(className := "title", s"${item.title}"),
                span(className := "selected")
              )
            )
          }

        )

      )
    )
    //					<i class='fa fa-home'></i>
    //					<span class='title'>首页</span>
    //					<span class='selected'></span>
    //				</a>
    //			</li>
    //
    //			<li id="predict" class="limitContent" >
    //				<a href='@routes.PredictController.predictBefore' >
    //					<i class='fa '></i>
    //					<span class='title'>预测</span>
    //					<span class='selected'></span>
    //				</a>
    //			</li>
    //
    //			<li id="batchPredict" class="limitContent" >
    //				<a href='@routes.PredictController.batchPredictBefore' >
    //					<i class='fa fa-file'></i>
    //					<span class='title'>批量预测</span>
    //					<span class='selected'></span>
    //				</a>
    //			</li>
    //
    //
    //			<li id="missionManage">
    //				<a href='@routes.MissionController.missionManageBefore' >
    //					<i class='fa fa-table'></i>
    //					<span class='title'>预测记录</span>
    //					<span class='selected'></span>
    //				</a>
    //			</li>
    //
    //
    //			<li id="index" style="display: none">
    //				<a href='@routes.UserController.toIndex'>
    //					<i class='fa fa-life-ring'></i>
    //					<span class='title'>分析系统</span>
    //					<span class='selected'></span>
    //				</a>
    //			</li>
    //
    //			<li id='passwordChange'>
    //				<a href='@routes.UserController.changePasswordBefore'>
    //					<i class='fa fa-key'></i>
    //					<span class='title'>密码修改</span>
    //					<span class='selected'></span>
    //				</a>
    //			</li>
    //
    //			<li id='detailInfo'>
    //				<a href='@routes.UserController.detailInfoBefore'>
    //					<i class='fa fa-user'></i>
    //					<span class='title'>账户信息</span>
    //					<span class='selected'></span>
    //				</a>
    //			</li>
    //
    //
    //		</ul>
    //	</div>
    //</div>

  }

}
